<!-- homeBanner -->
<template>
  <div class="homeBanner">
    <div class="bannerBox">
      <video id="myVideo" class="video-js bannerImg vjs-fluid">
        <source
          src="https://hll-prod.oss-cn-beijing.aliyuncs.com/hll_newPc/Home/pc.mp4"
          type="video/mp4"
        />
      </video>
      <div class="bannerContainerBox">
        <div class="bannerContent">
          <div class="contentTitleName">轰隆隆拥有海量机械资源</div>
          <div class="node_list">
            <div class="node_item">
              <div class="title_name">
                <countTo
                  :startVal="startVal"
                  :endVal="endVal"
                  :duration="4000"
                ></countTo>
                <span class="title_childName">台</span>
              </div>
              <div class="item_name">机械数量</div>
            </div>
            <div class="node_item1">
              <div class="title_name">
                <countTo
                  :startVal="startVal"
                  :endVal="endVal1"
                  :duration="4000"
                ></countTo>
                <span class="title_childName">座</span>
              </div>
              <div class="item_name">机械分布省市</div>
            </div>
            <div class="node_item">
              <div class="title_name">
                <countTo
                  :startVal="startVal"
                  :endVal="endVal2"
                  :duration="4000"
                ></countTo>
                <span class="title_childName">家</span>
              </div>
              <div class="item_name">设备供应商</div>
            </div>
            <div class="node_item">
              <div class="title_name"></div>
            </div>
            <div class="node_item">
              <div class="title_name"></div>
            </div>
          </div>
        </div>
        <div class="mechanicsList">
          <div class="inputBox3">
            <el-cascader
              ref="cascader"
              class="listWidthselect1"
              v-model="typeSize"
              placeholder="请选择设备类型"
              :options="aarNew"
              filterable
              @change="onChange"
            >
            </el-cascader>
          </div>
          <div class="inputBox">
            <input
              type="text"
              placeholder="请输入机械规格"
              class="inputItem"
              v-model="norm"
            />
          </div>
          <div class="inputBox">
            <el-date-picker
              v-model="startTime"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择日期"
              class="inputItem"
              :clearable="false"
            >
            </el-date-picker>
          </div>
          <div class="inputBoxNoBorder">
            <input
              type="text"
              placeholder="预估总工作量"
              class="inputItem1"
              v-model="total"
            />
            <div class="selectedBox" v-if="typeSize">
              <input
                type="text"
                class="inputSelect"
                disabled
                v-model="unit"
                placeholder="请选择"
              />
              <el-dropdown>
                <img
                  src="./../../../assets/img/selectIcon.png"
                  class="selectIcon"
                />
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item, index) of listData"
                    :key="index"
                    @click.native="handleCommand(item)"
                    >{{ item }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div class="inputBox2" @click="goReserve">现在预定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script >
import countTo from "vue-count-to";
import { typemenuthirds } from "./../../../apis/api.js";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: { countTo },
  data() {
    // 这里存放数据
    return {
      startTime: "", //日期选择
      typeSize: "", //机械类型
      unit: "", //台班类型
      norm: "", //机械规格
      total: "", //总工作量
      number: 1, //数量
      typeName: "", //中文的三级菜单三级类别
      icon_url: "", //机械图片
      startVal: 0,
      endVal: 158643,
      endVal1: 289,
      endVal2: 12568,
      listData: [],
      aarNew: [],
      userInfo: {},
      //机械类型数据对应后台返回的key格式
      // optopmsProps:{
      //   value:'size_id',
      //   label:'name',
      //   children:'types'
      // },
      typeList: [], //机械类型数据列表
      // 视频
      initVideo() {
        //此处初始化的调用，我放在了获取数据之后的方法内，而不是放在钩子函数mounted
        //页面dom元素渲染完毕，执行回调里面的方法
        this.$nextTick(() => {
          let myPlayer = this.$video(document.getElementById("myVideo"), {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: false,
            muted: false,
            //自动播放属性,muted:静音播放
            autoplay: "muted",
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: true, //预加载：string；'auto'|'true'|'metadata'|'none'
            loop: true,
          });
        });
      },
    };
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleCommand(key) {
      this.unit = key;
    },
    // 现在预定
    goReserve() { 
      // 判断是否登录
      var myValue = [];
      myValue.push({
        startTime: this.startTime,
        typeSize: this.typeSize,
        unit: this.unit,
        norm: this.norm,
        total: this.total,
        number: this.number,
        listData: this.listData,
        typeName: this.typeName,
        icon_url: this.icon_url,
      });
      this.$router.push({
        name: "MechanicalRent",
        params: { myValue: myValue },
      });
      if (!this.userInfo) {
        window.localStorage.setItem("listData", JSON.stringify(myValue));
        this.$router.push({ path: "/loginPc", query: { num: 1 } });
      }
    },
    // 选择设备类型查找子节点数组
    onChange() {
      console.log(this.$refs["cascader"].getCheckedNodes());
      let obj = this.$refs["cascader"].getCheckedNodes();
      let objData = obj[0].data.rentUnit;
      this.listData = [];
      objData.forEach((item) => {
        this.listData.push(item);
      });
      if (obj) {
        this.unit = "";
        this.total = "";
      }
      this.typeName = obj[0].label;
      this.icon_url = obj[0].data.icon_url;
    },
    // 获取机械类型内容
    async typemenuthirds() {
      let data = {
        num: "1",
      };
      try {
        let res = await typemenuthirds(data);
        if (res.data.result == "1") {
          this.typeList = res.data.body.first;
          this.changeName(this.typeList);
        }
      } catch (e) {
        console.log(e);
      }
    },

    },
    //机械类型中转换属性名
    changeName(data) {
      this.aarNew = data.map((arrlist) => {
        return {
          children: arrlist.types,
          value: arrlist.size_id,
          label: arrlist.name,
        };
      });
      this.aarNew.forEach((value, index) => {
        value.children = value.children.map((arrlist) => {
          return {
            children: arrlist.size,
            value: arrlist.size_id,
            label: arrlist.name,
          };
        });
      });
      this.aarNew.forEach((value, index) => {
        value.children.forEach((value, index) => {
          value.children = value.children.map((arrlist) => {
            return {
              value: arrlist.size_id,
              label: arrlist.name,
              rentUnit: arrlist.rentUnit,
              icon_url: arrlist.icon_url,
            };
          });
        });
      });
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.typemenuthirds();
    this.userInfo = window.localStorage.getItem("userInfo");
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initVideo();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.bannerBox {
  position: relative;
  width: 100%;
  height: 100vh;
}
.bannerImg {
  width: 100%;
  height: 100%;
}
.bannerContainerBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 65%;
}
.bannerContent {
  // position: absolute;
  // top: 25%;
  // left: 20%;
  // z-index: 100;
  // width: 1000px;
}
.contentTitleName {
  font-size: 42px;
  color: #fff;
  letter-spacing: 1px;
}
.node_list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 88px;
}
.node_item {
  display: flex;
  flex-direction: column;
}
.node_item1 {
  display: flex;
  flex-direction: column;
  max-width: 251px;
}
.title_name {
  font-size: 50px;
  color: #ff855b;
  font-family: BebasNeue;
  width: 350px;
}
.item_name {
  margin-top: 15px;
  color: #fff;
  font-size: 16px;
  font-family: STHeitiSC-Medium, STHeitiSC;
  width: 150px;
}
.title_childName {
  font-size: 30px;
  color: #ff855b;
}
.mechanicsList {
  margin-top: 10%;
  background: #fff;
  height: 66px;
  z-index: 100;
  display: flex;
  align-items: center;
  border-radius: 4px 5px 5px 4px;
}
.inputBox {
  height: 66px;
  flex: 1;
  border-right: 1px solid #d8d8d8;
  text-align: center;
}
.inputBox1 {
  flex: 1;
  height: 66px;
  border-right: 1px solid #d8d8d8;
  display: flex;
  align-items: center;
}
.inputBox3 {
  flex: 1;
  height: 66px;
  border-right: 1px solid #d8d8d8;
  display: flex;
  align-items: center;
}
.inputBoxNoBorder {
  height: 66px;
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
}
.inputBox2 {
  width: 150px;
  background: #ff855b;
  height: 66px;
  line-height: 66px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  border-radius: 0px 4px 4px 0px;
  cursor: pointer;
}
.inputItem {
  width: 100%;
  height: 66px;
  line-height: 66px;
  padding-left: 15px;
  box-sizing: border-box;
  font-size: 14px;
  color: #606266;
}
.inputItem1 {
  width: 70%;
  height: 66px;
  line-height: 66px;
  // text-align: center;
  padding-left: 15px;
  box-sizing: border-box;
  font-size: 14px;
  color: #606266;
}
.inputItem2 {
  width: 100%;
  height: 66px;
  // text-align: center;
  border-radius: 4px 0px 0px 4px;
  padding-left: 15px;
  box-sizing: border-box;
}
/* 谷歌 */
::-webkit-input-placeholder {
  color: #999;
  font-size: 14px;
}
/* 火狐 */
:-moz-placeholder {
  color: #999;
  font-size: 14px;
}
/*ie*/
:-ms-input-placeholder {
  color: #999;
  font-size: 14px;
}
.selectedBox {
  display: flex;
  align-items: center;
}
.selectIcon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  margin-top: 1px;
}
.inputSelect {
  width: 50px;
  height: 66px;
  text-align: center;
  font-size: 14px;
  color: #606266;
}
.listWidthselect1 {
  width: 230px;
  margin: 0 auto;
}
</style>
<style lang="scss">
.inputBox3 input.el-input__inner {
  border: 0 !important;
}
.inputBox3 input::-webkit-input-placeholder {
  font-size: 16px !important;
}
.inputBox input::-webkit-input-placeholder {
  font-size: 16px !important;
}
.inputBox input::-webkit-input-placeholder {
  font-size: 16px !important;
}
.inputBoxNoBorder input::-webkit-input-placeholder {
  font-size: 16px !important;
}
</style>